﻿<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="./Res/Bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./Res/Css/login.css">            <!--通过link 连接到样式表  设置页面的样式 -->
<title>Login</title>
<script src="./Res/JQuery/jquery-1.8.3.min.js"></script>                      <!-- 导入目录下jquery包 -->
<script>
$(document).ready(function(){
	var flag =0;                                                              //定义个flag位做位于下面提示语是否存在的标志 方便判断和对其操作
	$("[name='username']").focusout(function(){                              
		if($(this).val().length==0 ){                                         //当光标移出时 通过判断name框中字符串的长度 是否为0来判断是否为空
			if(flag ==0){
				$("#w1").remove(); 
				$(this).after("<span id='warming'><font color = red >username must be filled!</font></span>");
				flag =1;                                                      //结果为空时输出提示不能为空 并改变flag标记输入时错误的
			}
		}else{                                                                //结果不为空时 进一步判断是否存在
			$("#warming").remove();	
			flag =0;
			$.ajax({
				type:"post",
				url:"./check.jsp",                                             //通过URL连接到check页面判断数据库中是否存在此用户名
				data:{username:$("input[name='username']").val()},
				success:function(data,textStatus){
					$("#w1").remove();                                         //防止提示一直往后叠加 清除后面的提示
					$("[name='username']").after(data);
					//alert(data);
				}
			});
		}
	});
});	
</script>
</head>
<body class='container body'>
	<div class="login"> 
		<h2>Welcome</h2>
		<form action="CheckLogin" method="post" role="form">
			<div class="form-group">
				<label for="username">Username:</label>
				<input class="form-control" id="username" name="username" type="text"><br/>
			</div>
			<div class="form-group">
				<label for="password">Passwrod:</label>
				<input class="form-control" id="password" name="password" type="password"><br/>
			</div>

			<input id="submit" class="btn btn-lg btn-primary" type="submit" value="login">
			<input id="reset" class="btn btn-lg btn-default" type="reset" value="reset">
		</form>	
		<!-- <div><h4>Please click here to <a href="register.html">Register</a></h4></div> -->
	<div>
</body>
</html>
